<template>
  <div class="market">
    <!-- 头部导航区域开始 -->
    <layout-header></layout-header>
    <!-- 头部导航区域结束 -->
    <div class="search">
      <el-select  v-model="value"  slot="prepend" placeholder="全部分类" style="color: #333;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="input" placeholder="搜索你喜欢的"></el-input>
      <el-button slot="append" icon="el-icon-search">搜索</el-button>
    </div>
    <!-- 藏品区域 -->
    <el-main>
      <market-list></market-list>
      <p>没有更多数据了~</p>
    </el-main>
    <!-- 底部区域 -->
    <layout-footer></layout-footer>
  </div>
</template>
<script>
import LayoutFooter from '@/components/LayoutFooter.vue'
import MarketList from '../market/components/MarketList.vue'

export default {
  name: 'market',
  components: {
    LayoutFooter,
    MarketList
  },
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '全部分类'
        },
        {
          value: '选项2',
          label: '分类1'
        },
        {
          value: '选项3',
          label: '分类2'
        },
        {
          value: '选项4',
          label: '分类3'
        },
        {
          value: '选项5',
          label: '分类4'
        },
        {
          value: '选项6',
          label: '分类5'
        }
      ],
      value: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.market {
  width: 100%;
  background: #F8FBFF;

  .search {
    margin-top: 7.24%;
    text-align: center;

    .el-select {
      width: 130px;
      background: #fff;

      ::v-deep .el-input__inner {
        height: 50px;
        border-top: 1px solid #2C2C34;
        border-left: 1px solid #2C2C34;
        border-bottom: 1px solid #2C2C34;
        border-right: none;
        border-radius: 12px 0 0 12px;
      }
    }

    .el-input {
      width: 600px;
      height: 50px;

      ::v-deep .el-input__inner {
        height: 50px;
        border-top: 1px solid #2C2C34;
        border-left: none;
        border-bottom: 1px solid #2C2C34;
        border-right: none;
        border-radius: 0;
      }
    }

    .el-button {
      width: 104px;
      height: 50px;
      position: relative;
      top: 1.4px;
      margin-left: -18px;
      border-top: 1px solid #2C2C34;
      border-right: 1px solid #2C2C34;
      border-bottom: 1px solid #2C2C34;
      border-left: none;
      background: #0066ED;
      color: #fff;
      font-size: 16px;
      border-radius: 11px;
      z-index: 10;
    }
  }

  .el-main {
    width: 100%;
    height: auto;
    overflow: hidden !important;

    p{
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 19px;
      color: #333;
    }
  }
}
</style>
